<!-- 商品详情页 -->
<template>
  <div class="detail">
    <DetailTop :shop="shop"></DetailTop>
    <div class="content">
      <DetailMain></DetailMain>
    </div>
  </div>
  <DetailBottom :shopId="shopId" @toast="showToast=!showToast"></DetailBottom>
  <div class="cover" v-if="showToast" @click="showToast=!showToast"></div>
  <PopupCart v-if="showToast" :shopId="shopId" @hide="showToast=!showToast"></PopupCart>
</template>

<script>
import { ref } from 'vue';
import { get } from '@/utils/request';
import { SHOP_DETAIL } from '@/api/interface';
import { useRoute } from 'vue-router';
import DetailTop from './components/detailTop'
import DetailBottom from './components/detailBottom'
import DetailMain from './components/detailMain'
import PopupCart from './components/popupCart'
// 获取相关数据
const useRequest = (shopId) => {
  // 商店信息
  const shop = ref({});
  // 商品信息
  const product = ref({});
  // 商店请求
  get(SHOP_DETAIL+shopId)
  .then(response => shop.value = response.data)
  .catch(error => console.log(error))
  return {shop,product}
}
// composition
export default {
  name:'detail',
  components:{DetailTop,DetailBottom,DetailMain,PopupCart},
  setup(){
    const showToast = ref(false);
    const route = useRoute();
    const shopId = route.params.id;
    const {shop} = useRequest(shopId);
    return {shop,shopId,showToast}
  }
}
</script>

<style scoped lang="scss">
.detail{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 49px;
  .content{
    flex: auto;
    overflow: hidden;
  }
}
.cover{
  position: fixed;
  top: 0;
  bottom: 49px;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}
</style>